<template>
  <div id="vueEdit">
    <quill-editor v-model="content"
                  ref="quillEditor"
                  class="editer"
                  :options="editorOption"
                  @ready="onEditorReady($event)">
    </quill-editor>
    <div class="submitBtn">
      <el-button type="primary" @click="submit">提交</el-button>
    </div>
  </div>
</template>

<script>
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  import {quillEditor} from 'vue-quill-editor'

  export default {
    data() {
      return {
        content: '<h3>文本编辑</h3>',
        editorOption: {}
      }
    },
    components: {
      quillEditor
    },
    computed: {
      editor() {
        return this.$refs.quillEditor.quill;
      }
    },
    methods: {
      onEditorReady(editor) {
        //console.log(editor);
      },
      submit() {
        this.$message.success('提交成功！');
      }
    },
  }
</script>

<style lang="stylus">
  #vueEdit {
    padding 40px
    margin-bottom 40px
  }

  .editer {
    height 350px
  }

  .submitBtn {
    text-align center
    margin-top 80px
  }
</style>
